import Vue from 'vue'
import VueRouter from './k-router.js'
import About from '../components/About.vue'

Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div class="user"> <router-link to="/barInfo">go to foo</router-link><h2>Bar</h2><router-view></router-view></div>' }

// const BarInfo = { template: '<div>BarInfo</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '/about', name: 'about', component: About, children: [
    {
      path: '/info',
      component: { render(h) { return h('div', 'info page')} }
    }
  ]}
]


// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})


export default router

// 作业
// 查看源码，解答嵌套路由的解决方案

// 查看vuex源码，并实现getters

// 了解vue数据相应原理